<style lang="scss" scoped>
  .commonecharts_body {
    .echart_container {
      width: 365px;
      margin: 8px 12px;
      height: 210px;
      border: 1px solid #0f3056;
      box-sizing: border-box;
      background-color: #091f2d;
      /*padding: 0 12px;*/
      border-radius: 3px;
    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container">

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: ['garbageRatio'],
    mounted() {
      console.log('garbageRatio');
      console.log(this.garbageRatio);
      this.initEcharts()

    },
    watch: {
      'garbageRatio': {
        handler(newVal, old) {
          console.log('garbageRatio');
          console.log(this.garbageRatio);
          this.initEcharts()
        },
        deep: true
      },
    },
    methods: {
      initEcharts() {
        let that = this;
        const myChart = echarts.init(document.querySelectorAll('.echart_container')[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: <br/>{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 20,
            top:60,
            data: ['可回收垃圾', '厨余垃圾', '有害垃圾', '其他垃圾'],
            textStyle: {
              color: '#728088'
            }
          },
          title:{
            text:"垃圾占比",
            left:"25%",
            top:"44%",
            textStyle:{
              color:"#728088",
              fontSize:16,
            }
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['35%', '50%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: this.garbageRatio.recyclable, name: '可回收垃圾',itemStyle:{color:"#527ACE"}},
                {value: this.garbageRatio.kitchenWaste, name: '厨余垃圾',itemStyle:{color:"#E4B62D"}},
                {value: this.garbageRatio.harmful, name: '有害垃圾',itemStyle:{color:"#A74E18"}},
                {value: this.garbageRatio.other, name: '其他垃圾',itemStyle:{color:"#5BC19C"}},
              ]
            }
          ]
        };

        myChart.setOption(option);
      }

    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
